import React, { useEffect, useState } from 'react'
import {
  Row,
  Col,
  Typography,
  Flex,
  Button,
  Form,
  Input,
  Select,
  Radio,
  message
} from 'antd'
import ImageUpload from '../components/ImageUpload'
import {
  sellerIndustryList,
  sellerVerifyAdd,
  sellerVerifyDetail,
  sellerVerifyEdit
} from '../service/seller'
import { useNavigate, useParams } from 'react-router-dom'
import ImageIdUpload from '../components/ImageIdUpload'

export default function SellerAdd() {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const { id } = useParams() // 获取路由参数中的id
  const isEditing = id !== undefined // 根据id是否存在判断是编辑还是添加
  // 是否审核通过
  const [pass, setPass] = useState(true)
  // 保存图像上传
  const [imageUrl, setImageUrl] = useState()
  // 保存Logo
  const [imageLogo, setImageLogo] = useState()
  const [imageId, setImageId] = useState()
  // 保存行业类型
  const [industryList, setIndustryList] = useState([])
  // 保存新增时商家类型
  const [industryType, setIndustryType] = useState('')
  useEffect(() => {
    ;(async () => {
      // 查询行业类型
      const res = await sellerIndustryList()
      setIndustryList(res.data)
      if (isEditing) {
        // 编辑时获取商家信息
        const res2 = await sellerVerifyDetail(id)
        console.log(res2)
        form.setFieldsValue(res2.data)
        setImageUrl(res2.data.businessLicense)
        setImageLogo(res2.data.businessLogo)
      }
    })()
  }, [])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={4}>信息管理</Typography.Title>
            {/* <Button type="primary" icon={<PlusOutlined />}>
              新增商家
            </Button> */}
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Typography.Title level={4}>新增商家</Typography.Title>
        </Col>
        <Col span={24}>
          <Form
            form={form}
            labelCol={{
              span: 2
            }}
            wrapperCol={{
              span: 16
            }}
            onFinish={async (v) => {
              if (isEditing) {
                const res = await sellerVerifyEdit({
                  businessStatus: pass ? 2 : 3,
                  auditRemarks: pass ? '同意' : '拒绝',
                  id
                })
                console.log(res)
                if (res.code === '0') {
                  message.success('审批成功')
                  navigate('/admin/seller/verify')
                }
              } else {
                v.businessLicense = imageUrl
                v.businessLogo = imageLogo
                v.businessStatus = 1
                const res = await sellerVerifyAdd(v)
                console.log(res)
                if (res.code === '0') {
                  message.success('新增成功')
                  navigate('/admin/seller/verify')
                }
              }
            }}
          >
            <Form.Item
              label="商家名称"
              name="businessName"
              rules={[{ required: true, message: '请输入商家名称' }]}
            >
              <Input style={{ width: 400 }} />
            </Form.Item>
            <Form.Item
              label="行业类型"
              name="industryType"
              rules={[{ required: true, message: '请输入行业类型' }]}
            >
              <Select
                style={{ width: 400 }}
                placeholder="请选择行业"
                // defaultValue="1"
                onChange={(value) => setIndustryType(value)}
                fieldNames={{
                  value: 'id'
                }}
                options={industryList}
              />
            </Form.Item>
            <Form.Item
              label="负责人"
              name="businessHeadName"
              rules={[{ required: true, message: '请输入负责人' }]}
            >
              <Input style={{ width: 400 }} placeholder="请输入负责人" />
            </Form.Item>
            <Form.Item
              label="负责人电话"
              name="businessHeadPhone"
              rules={[
                {
                  required: true,
                  message: '电话号码不能为空'
                },
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: '请输入正确的手机号码'
                }
              ]}
            >
              <Input style={{ width: 400 }} placeholder="请输入负责人电话" />
            </Form.Item>
            <Form.Item
              label="公司地址"
              name="companyAddress"
              rules={[{ required: true, message: '请输公司地址' }]}
            >
              <Input style={{ width: 400 }} placeholder="请输入公司地址" />
            </Form.Item>
            <Form.Item label="营业执照" name="businessLicense">
              <ImageUpload imageUrl={imageUrl} setImageUrl={setImageUrl} />
            </Form.Item>
            <Form.Item label="门店Logo">
              <ImageIdUpload
                imageUrl={imageLogo}
                setImageUrl={setImageLogo}
                imageId={imageId}
                setImageId={setImageId}
              />
            </Form.Item>
            <Form.Item
              label="商家简介"
              name="businessIntroduction"
              rules={[{ required: true, message: '请输入商家简介' }]}
            >
              <Input.TextArea
                style={{ width: 400, height: 100 }}
                placeholder="请输入商家简介"
              />
            </Form.Item>
            <Form.Item label="审核意见">
              <Row
                style={{
                  textAlign: 'center',
                  border: '1px solid #e2e2e2',
                  backgroundColor: '#f5f5f5',
                  lineHeight: '32px'
                }}
              >
                <Col span={5}>当前审核人</Col>
                <Col span={5}>当前时间</Col>
                <Col span={5}>审核意见</Col>
                <Col span={5}>驳回原因</Col>
                <Col span={4}>备注</Col>
              </Row>
              <Row
                style={{
                  textAlign: 'center',
                  lineHeight: '32px'
                }}
              >
                <Col span={5}>Jack</Col>
                <Col span={5}>2023-12-12</Col>
                <Col span={5}>
                  <Radio.Group
                    onChange={(e) => setPass(e.target.value === '2')}
                  >
                    <Radio value="2">通过</Radio>
                    <Radio value="3">驳回</Radio>
                  </Radio.Group>
                </Col>
                <Col span={5} style={{ paddingRight: 10 }}>
                  {!pass && (
                    <Select
                      options={[
                        { label: '营业执照不清晰', value: '营业执照不清晰' },
                        { label: '营业执照不合法', value: '营业执照不合法' },
                        {
                          label: '营业执照与公司不符',
                          value: '营业执照与公司不符'
                        }
                      ]}
                    />
                  )}
                </Col>
                <Col span={4}>
                  {!pass && <Input.TextArea placeholder="请输入备注" />}
                </Col>
              </Row>
            </Form.Item>
            <Form.Item label=" " colon={false}>
              <Button
                type="primary"
                htmlType="submit"
                style={{ marginRight: 10 }}
              >
                确定
              </Button>
              <Button type="default" htmlType="reset">
                重置
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </>
  )
}
